<template>
  <div class="config-other">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>其他配置</h3>
        </div>
      </template>

      <el-form :model="configForm"
label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开发者">
              <el-input v-model="configForm.author"
placeholder="请输入开发者" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开发版本号">
              <el-input v-model="configForm.version"
placeholder="请输入版本号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
type="primary" @click="submitForm">
立即提交
</el-button>
          <el-button @click="resetForm">
重置
</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from '@/utils/request'

  // 表单数据
  const configForm = reactive({
    id: 0,
    author: '',
    version: '',
  })

  // 获取其他配置
  const getOtherConfig = async () => {
    try {
      const response = await axios.get('/home/conf/other')

      if (response.data?.code === 0) {
        Object.assign(configForm, response.data.data)
      } else {
        ElMessage.error(response.data?.msg || '获取其他配置失败')
      }
    } catch (error) {
      ElMessage.error('获取其他配置失败')
    }
  }

  // 提交表单
  const submitForm = async () => {
    try {
      const response = await axios.post('/home/conf/edit', configForm)

      if (response.data?.code === 0) {
        ElMessage.success('保存成功')
      } else {
        ElMessage.error(response.data?.msg || '保存失败')
      }
    } catch (error) {
      ElMessage.error('保存失败')
    }
  }

  // 重置表单
  const resetForm = () => {
    getOtherConfig()
  }

  // 初始化
  onMounted(() => {
    getOtherConfig()
  })
</script>

<style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
